<template>
  <section class="main">
    <input
      id="toggle-all"
      class="toggle-all"
      type="checkbox"
      v-model="isAllDone"
    />
    <label for="toggle-all">Mark all as complete</label>
    <ul class="todo-list">
      <li
        v-for="item in newLists"
        :key="item.id"
        :class="item.done ? 'completed' : ''"
      >
        <div class="view">
          <input
            class="toggle"
            type="checkbox"
            :checked="item.done"
            @change="changeDone(item.id)"
          />
          <label>{{ item.content }}</label>
          <button class="destroy" @click="delFn(item.id)"></button>
        </div>
        <input class="edit" value="Rule the web" />
      </li>
    </ul>
  </section>
</template>

<script setup lang="ts">
import { computed } from "@vue/runtime-core";
import { Todo } from "../App.vue";

interface Props {
  lists: Todo[];
  type: string;
}

const props = defineProps<Props>();
console.log(props);

const newLists = computed((): Todo[] => {
  if (props.type === "active") return props.lists.filter((v) => v.done);
  if (props.type === "completed") return props.lists.filter((v) => !v.done);
  return props.lists;
});

const emit = defineEmits(["delTodo", "changeDone", "isAllDone"]);

const delFn = (id: number) => {
  emit("delTodo", id);
};

const changeDone = (id: number) => {
  emit("changeDone", id);
};

const isAllDone = computed<boolean>({
  get: () => props.lists.length !== 0 && props.lists.every((item) => item.done),
  set: (value: boolean) => emit("isAllDone", value),
});
</script>
